.content-info {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("~@/assets/demo/assets/images/basicInfo/map.png");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;


  .content-info-container {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/demo/assets/images/basicInfo/bg.png");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 60px;
  }

  .content {
    height: 100%;
    padding: 9vh 0 50px 0;
  }

  .content-row, .content-col {
    height: 100%;
  }
}

/* 顶部样式 */
.header {
  position: relative;
  height: 0.5%;

  .title {
    position: absolute;
    top: 0.4vh;
    left: 50%;
    transform: translateX(-50%);
    overflow-wrap: break-word;
    color: rgba(112, 112, 112, 1);
    font-size: 32px;
    letter-spacing: 3px;
    font-family: 'pmfont', 'Open Sans', Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(
        180deg,
        rgba(200, 215, 228, 1) 0,
        rgba(255, 255, 255, 1) 100%
    );
    line-height: 42px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @media screen and (min-width: 1920px) and (max-width: 3840px) {
    .title {
      font-size: 54px;
      letter-spacing: 8px;
      top: 1.5vh;
    }
  }

  .header-content {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      color: #fff;

      span:nth-child(n + 4) {
        font-size: 12px;
        color: rgba(205, 223, 255, 1);
      }

      > span {
        font-size: 18px;
        padding-right: 4px;

        > span {
          font-size: 14px;
          font-weight: 600;
        }
      }
    }

    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .custom-icon {
        cursor: pointer;
        margin-left: 16px;
      }

      .user-info {
        height: 32px;
        width: 120px;
        color: #ffffff;
        background: url("~@/assets/demo/assets/images/basicInfo/user_info_bg.png") 0px -1px no-repeat;
        background-size: 120px 33px;
        margin-left: 16px;
        padding: 7px 40px;
        display: flex;
        align-items: center;
      }

      .setup {
        background: url("~@/assets/demo/assets/images/basicInfo/icons/setup.png") 100% no-repeat;
        background-size: 100% 100%;
        width: 22px;
        height: 20px;
      }

      .back_home {
        background: url("~@/assets/demo/assets/images/basicInfo/icons/back_home.png") 100% no-repeat;
        background-size: 100% 100%;
        width: 20px;
        height: 22px;
      }

      .logout {
        background: url("~@/assets/demo/assets/images/basicInfo/icons/logout.png") 100% no-repeat;
        background-size: 100% 100%;
        width: 22px;
        height: 22px;
      }
    }
  }
}

.container {
  height: 100%;
  position: relative;
}

.list-title {
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_title.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 26px;
  position: relative;
  margin-bottom: 10px;

  .list-title-icon {
    position: absolute;
    left: 12px;
    top: -5px;
  }

  > span {
    position: absolute;
    left: 8vh;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-family: 'pmfont', 'Open Sans', Arial, sans-serif;
    color: #ffffff;
    letter-spacing: 2px;
  }
}

/* 搜索框样式 */
.search-from {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .custom-set {
    background: url("~@/assets/demo/assets/images/basicInfo/icons/set.png") 100% no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  > i {
    color: #72DEEF;
    font-size: 22px;
  }

  .connect {
    color: #ffffff;
    font-size: 12px;
    padding: 0 10px;
  }

  ::v-deep .el-button--primary {
    background-color: #008DFF;
    border-color: #008DFF;
  }

  ::v-deep .el-input .el-input__inner,
  ::v-deep .el-range-editor.el-input__inner,
  ::v-deep .el-range-input {
    background: rgb(50, 69, 83);
    color: #ffffff;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    border: #4E606B;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0;
  }

  ::v-deep .el-form-item__label, ::v-deep .el-range-separator {
    color: #ffffff;
    font-size: 12px;
  }

  ::v-deep .el-date-editor .el-input__icon,
  ::v-deep .el-date-editor .el-range__icon {
    display: none;
  }
}

/* 分页样式 */
.bottom-pagination {
  position: absolute;
  right: 0;
  bottom: 0;
}

.pagination-container {
  background-color: transparent !important;
}

::v-deep .el-pagination span {
  color: #899DDB;
}

::v-deep .el-pagination__sizes {
  margin: 0;
}

::v-deep .el-pagination .el-select .el-input {
  width: 100px;
  background-color: #1C1F20;
}

::v-deep .bottom-pagination .el-pagination .el-select .el-input .el-input__inner {
  padding: 0;
  background: transparent !important;
}

::v-deep .bottom-pagination .el-pagination.is-background .btn-prev:disabled,
::v-deep .bottom-pagination .el-pagination.is-background .btn-next:disabled {
  background: transparent;
  color: #899DDB;
}

::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .el-pager li {
  background: transparent;
  color: #899DDB;
}

::v-deep .bottom-pagination .el-input .el-input__inner {
  background: #1C1F20;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  border: #4E606B;
  color: #899DDB;
  border: 2px solid rgba(104, 173, 255, 0.29);
}

::v-deep .el-pagination.is-background .el-pager li {
  height: 24px;
  line-height: 24px;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1C6AFF;
}

::v-deep .el-pagination__jump {
  margin-left: 0;
}

/***********/

/* 列表样式 */
/* 设置表格内容区域背景色为透明色 */
::v-deep .el-table, .el-table__expanded-cell {
  color: #fff;
  background-color: transparent;
}

::v-deep .el-table__header {
  background-image: url("~@/assets/demo/assets/images/basicInfo/table_header_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

::v-deep .el-table__header th {
  background-color: transparent !important;
  color: #fff;
  font-size: 12px;
}

::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  font-size: 12px;
}

::v-deep .el-table__body {
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 4px; // 垂直间距
}

/* 表格body行样式 */
::v-deep.el-table .el-table__body tr {
  background-color: transparent;
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_even_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

::v-deep .el-table .el-table__body tr:hover {
  font-weight: bold;
  background-color: transparent !important;
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_select_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 修改被选中行的背景颜色和文本颜色 */
::v-deep .el-table .el-table__body tr.el-table__row.current-row {
  font-weight: bold;
  background-color: transparent !important;
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_select_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

::v-deep.el-table--striped .el-table__body tr.el-table__row--striped {
  background-color: transparent;
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_odd_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

::v-deep.el-table--striped .el-table__body tr.el-table__row--striped:hover {
  background-image: url("~@/assets/demo/assets/images/basicInfo/list_select_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-weight: bold;
}

::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: transparent;
}

/* 修改el-table的body行padding */
::v-deep.el-table .el-table__body td {
  padding: 0;
}

/* 去除表格线 */
::v-deep .el-table__row > td {
  border: none;
}

::v-deep.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border: none;
}

::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}

/* dialog样式 */
.dialog {
  ::v-deep .el-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0 !important;
    background-image: url("~@/assets/demo/assets/images/basicInfo/dialog_content_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none !important;
    border-radius: 10px 10px 0 0;
    transition: opacity 0.1s ease;
    background-color: transparent;
  }

  ::v-deep .el-dialog__header {
    background-image: url("~@/assets/demo/assets/images/basicInfo/dialog_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    border: none !important;

    .el-dialog__title {
      color: #ffffff;
      font-size: 20px;
      letter-spacing: 1px;
    }

    .el-dialog__headerbtn {
      top: 15px;
    }
  }

  .dialog-header {
    .header-title {
      color: #ffffff;
      font-size: 18px;
      letter-spacing: 1px;
    }

    .close-icon {
      position: absolute;
      top: 15px;
      right: 20px;
      padding: 0;
      cursor: pointer;
      font-size: 20px;
      color: #ffffff;
    }
  }

  ::v-deep .el-dialog__footer {
    background-color: transparent;
    padding: 10px;
  }

  ::v-deep .el-input .el-input__inner,
  ::v-deep .el-textarea .el-textarea__inner,
  ::v-deep .el-range-editor.el-input__inner,
  ::v-deep .el-range-input {
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(213, 218, 222, 0.09);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
  }

  ::v-deep .el-form-item {
    width: 100%;
    margin-bottom: 10px;
  }

  ::v-deep .el-form-item .el-form-item__content {
    width: calc(100% - 80px);
  }

  ::v-deep .el-select .el-input .el-select__caret {
    display: none;
  }

  ::v-deep .el-form-item__label, ::v-deep .el-range-separator {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px
  }

  ::v-deep .el-date-editor .el-input__icon,
  ::v-deep .el-date-editor .el-range__icon {
    display: none;
  }

  .pic {
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(213, 218, 222, 0.09);
    width: 100%;
    min-height: 100px;
    padding: 10px;
  }

  .pic-uri {
    width: 300px;
    height: 200px;
    border: 1px solid;
    border-image: linear-gradient(to top left, #0B2C45, #2BD3F0, #2BD3F0, #0B2C45) 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 查询条件、列表进行自定义设置样式 */
.field-custom {
  .field-custom-header {
    width: 100%;
    margin-bottom: 6px;
    display: flex;
    align-items: center;

    .field-custom-image {
      width: 21px;
      height: 12px;
      margin-right: 6px;
      background-image: url("~@/assets/demo/assets/images/basicInfo/icons/field_custom_title.png");
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .field-custom-title {
      color: #ffffff;
      font-size: 12px;
      font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
    }
  }

  .field-custom-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(213, 218, 222, 0.09);
    padding: 15px;

    .field-selected {
      background: rgba(0, 0, 0, 0.1);
      border: 2px solid rgba(213, 218, 222, 0.09);

      .field-list-selected {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
    }

    .field-list {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
    }
  }

  .custom-title {
    width: 100%;
    margin-bottom: 6px;
    display: flex;
    align-items: center;

    .image {
      width: 21px;
      height: 12px;
      margin-right: 6px;
      background-image: url("~@/assets/demo/assets/images/basicInfo/icons/field_custom_title.png");
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title {
      color: #ffffff;
      font-size: 12px;
      font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
    }
  }

  .field-item {
    font-size: 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 15px;
    margin: 0 10px 10px 0;
    position: relative;
    cursor: move;
  }

  .field-item:hover {
    background-color: #0566D3;
  }

  .special-style {
    background: rgba(0, 0, 0, 0.3);
  }

  .list-field-config {
    margin-top: 20px;
  }

  .non-draggable-element {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
  }
}
